<template>
	<view class="check-select-business">
		<!-- 搜索 -->
		<view class="doclist_search" :style="{height: (showArea)?'100%':'auto'}"  @click="showArea=false">
			<view class="outer" @tap.stop="stop">
				<!-- 搜索 -->
				<view class="search-box u-flex">
					<view class="u-flex" @click="showArea=!showArea">
						<u-icon name="map" color="#b0b0b0"></u-icon>
						<view class="u-line-1" style="line-height: 68rpx;margin-right: 30rpx;">{{areaTitle}}</view>
					</view>
					<u-search
						:showAction="false"
						placeholder="查找药房"
						placeholderColor="#999999"
						bgColor="#f6f6f6"
						@search="Onsech"
						>
					</u-search>
				</view>
			</view>
			
			<view class="funnel-mode" v-if="showArea" @tap.stop="stop">
				<view class="area-list u-flex">
					<view class="left">
						<view class="item" :class="{on:it.code==provinceCode}" v-for="(it,idx) in provinceList" :index="idx" @click="changeProvince(it.code, it.title)">{{it.title}}</view>
					</view>
					<view class="right">
						<view class="item" :class="{on:it.code==cityCode}" v-for="(it,idx) in cityList" :index="idx" @click="changeCity(it.code, it.title)">{{it.title}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<!-- 数据 -->
			<view class="list" v-if="group.list.length>0">
				<view class="item u-flex" v-for="(item,index) in group.list" :key="index" @click="onSelect(item)">
					<image class="avatar" :src="$base.cdn(item.avatar)" mode="aspectFill"></image>
					<view class="u-flex-fill">
						<view class="tit">{{item.name}}</view>
						<view class="con">
							周一至周日9:00-12:00 13:00-18:00
						</view>
						<view class="address u-flex">
							<view class="u-flex-fill">洪山区珞喻路456号</view>
							
							<view style="color: #656565;">4.5km</view>
						</view>
					</view>
				</view>
			</view>
			<lj-empty v-else-if='!loading'>未搜索到相关机构</lj-empty>
			<view v-if="loading || group.list.length > 0">
				<u-loadmore
					:status="loading?'loading':(group.loaded?'nomore':'loadmore')"
					fontSize="12"
					color="#ccc"
					nomoreText="已加载全部"
					marginTop="40rpx"
					@loadmore="getList"
				></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sech:'',
				showArea: false,
				util: {}, //地址
				provinceList: [],
				cityList: [],
				
				
				areaTitle: '全部地区',
				
				provinceTitle: '',
				provinceCode: 0,
				cityCode: 0,
				
				group:{
					page: 1,
					limit: 10,
					list: [],
					loaded: false
				},
				loading: false,
				
				order_code: '',
			}
		},
		onLoad: function(options) {
			if(options.order_code) this.order_code = options.order_code
			this.getList()
		},
		mounted() {
			var util = require('@/common/js/area.js');
			this.util = util.default.areaList
			//修改地址格式
			this.Onutil()
		},
		onReachBottom(){  //上拉触底函数
			this.getList();
		},
		methods: {
			Onutil() {
				var provinceList = [
					{
						title: '全部',
						code: 0
					}
				]
				for (let key in this.util.province_list) {
					provinceList.push({
						title: this.util.province_list[key],
						code: key
					})
				}
				this.provinceList = provinceList
			},
			changeProvince(code, title){
				this.provinceCode = code
				this.provinceTitle = title
				
				if(code){
					var cityList = [
						{
							title: '全部',
							code: 0
						}
					]
					for (let key in this.util.city_list) {
						if (code.substring(0, 2) == key.substring(0, 2)) {
							cityList.push({
								title: this.util.city_list[key],
								code: key
							})
						}
					}
					this.cityList = cityList
				}else{
					this.areaTitle = '全部地区'
					
					this.cityCode = 0
					this.cityList = []
					
					this.ljRefresh()
				}
			},
			changeCity(code, title){
				if(code) this.areaTitle = title
				else this.areaTitle = this.provinceTitle
				
				this.cityCode = code
				console.log(code, title)
				this.ljRefresh()
			},
			ljRefresh(){
				this.showArea = false
				
				this.group.list = []
				this.group.page = 1
				this.group.loaded = false
				this.loading = false
				
				this.getList()
			},
			
			//机构列表
			getList() {
				var that = this,group = that.group;
				if(that.loading || group.loaded) return;
				
				that.loading = true
				
				let data = {
					page: group.page,
					limit: group.limit,
					
					name: this.sech,
					provinceCode: this.provinceCode,
					cityCode: this.cityCode,
				}
				this.$Http({
					url: 'getBusinessList',
					data: data,
					load: false,
					token: false
				}).then(res => {
					if (res.code == 1) {
						var list = res.data;
						group.loaded = list.length < group.limit;
						group.page ++;
						group.list = group.list.concat(list);
					}
					that.loading = false
				}).catch(()=>{
					that.loading = false
				});
			},
			Onsech(e){
				this.sech = e
				
				this.group.list = []
				this.group.page = 1
				this.group.loaded = false
				this.loading = false
				
				this.showArea=false
				
				this.getList()
			},
			onSelect(item){
				console.log('onSelect',item)
				this.$store.commit('selectBusinessobj', item)
				
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	@import '@/pagesL/style.less';
</style>
